<style lang="scss">
.box{
  overflow: none;
}
.h_bottom {
display: flex;
width: 100%;
.left{
  width: 90%;
}
.right{
  flex: 1;
  padding-left: 10px;
  border-left: 2px solid #ccc;
}
}
.list{
  padding: 20px;
    border-bottom: 3px solid #ccc;
}
.date{
  font-size: 12px;
}
.title{
  font-size: 20px;
}
.desc{
  font-size: 14px;
}
</style>
<template>
  <div class="box">
    <header>
      <div class="div1">
        <van-icon class="icon1" name="manager" @click="onicon1" />
        <van-icon class="icon1" name="flower-o" />
      </div>
      <div class="h_bottom" >
          <div class="left">
              <van-tabs class="tab" active="{{ active }}" bind:change="onChange">
            <van-tab title="内科"
              >
                <div
                  class="list"
                  v-for="item in listData"
                  :key="item.id"
                  @click="goToDetail(item.id)"
                >
                  <p class="title">{{ item.title }}</p>
                  <p class="date">{{ item.date }}</p>
                  <p class="desc">{{ item.desc }}</p>
                </div>
              </van-tab>
            <van-tab title="骨科">内容 2</van-tab>
            <van-tab title="小儿科">内容 3</van-tab>
            <van-tab title="皮肤科">内容 4</van-tab>
            <van-tab title="骨科">内容 2</van-tab>
            <van-tab title="小儿科">内容 3</van-tab>
            <van-tab title="皮肤科">内容 4</van-tab>
          </van-tabs>
          </div>
          <div class="right">
            <span>
            <van-icon name="like-o" @click="search" />
          </span>
          
          </div>
      </div>
    </header>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { request } from '@/axios/request'
import { useRouter } from 'vue-router'
import { defineProps } from 'vue'
import type { ListState } from '@/ListState'

defineProps<{
  v: ListState
}>()

const router = useRouter()
const listData = ref([] as any[])

const fetchListData = async () => {
  const resp = await request.get('/api/users')
  console.log(resp.data.data.item)
  listData.value = resp.data.data.item
}

onMounted(fetchListData)

const search = () => {
  router.push('./search')
}

const onicon1 = () => {
  router.push('/my')
}

// Navigate to detail page with the item's id
const goToDetail = (id: string) => {
  router.push({ name: 'DetailPage', params: { id } })
  console.log(id)
}
</script>

<style lang="scss">
.box {
  width: 100%;
  height: 100%;
  header {
    .h_top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .h_bottom {
      margin-top: 20px;
      height: 40px;
      line-height: 40px;
      border-top: 3px solid #ccc;
      border-bottom: 3px solid #ccc;
      p {
        span {
          display: inline-block;
          margin-left: 35px;
          color: #ccc;
        }
      }
    }
  }
  main {
    overflow: scroll;
    .list {
      width: 100%;
      height: 200px;
      border-bottom: 2px solid #ccc;
      p {
        margin-top: 20px;
        color: #000;
      }
    }
  }
}
.div1 {
  display: flex;
  justify-content: space-between;

  .icon1 {
    font-size: 30px;
    margin: 10px;
  }
}
</style>